
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: Drag &amp; Drop: List reorder w/Bubbling</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
    /*Supplemental CSS for the YUI distribution*/
    #custom-doc { width: 95%; min-width: 950px; }
    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
/*    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">

<!--there is no custom header content for this example-->

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>

</head>
<body id="yahoo-com" class="yui3-skin-sam  yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p>
            <em>
                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>	
            </em>
		</p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
            <input name="vs" type="hidden" value="developer.yahoo.com">
            <input name="vs" type="hidden" value="yuiblog.com">
		    <div id="sitesearch">
		    	<label for="searchinput">Site Search (YDN &amp; YUIBlog): </label>
			    <input type="text" id="searchinput" name="p">
			    <input type="submit" value="Search" id="searchsubmit" class="ygbt">
		    </div>
		</form>
    </div>
	<div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: Drag &amp; Drop: List reorder w/Bubbling</h1></div>
</div>
<div id="bd">


	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example" id="main">

	<h2>Drag &amp; Drop: List reorder w/Bubbling</h2>

	<div id="example" class="promo">
	<div class="example-intro">
	<p>This example shows how to make a sortable list using Custom Event Bubbling.</p>
	</div>	

	<div class="module example-container ">
			<div class="hd exampleHd">
			<p class="newWindowButton yui-skin-sam">
                <a href="list-drag_clean.html" target="_blank">View example in new window.</a>
            </p>
		</div>		<div id="example-canvas" class="bd">

		
	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
	
	<style type="text/css" media="screen">
    .yui3-dd-proxy {
        text-align: left;
    }
    #play {
        border: 1px solid black;
        padding: 10px;
        margin: 10px;
        zoom: 1;
    }
    #play:after { display: block; clear: both; visibility: hidden; content: '.'; height: 0;}
    #play ul {
        border: 1px solid black;
        margin: 10px;
        width: 200px;
        height: 300px;
        float: left;
        padding: 0;
        zoom: 1;
        position: relative;
    }
    #play ul li {
        background-image: none;
        list-style-type: none;
        padding-left: 20px;
        padding: 5px;
        margin: 2px;
        cursor: move;
        zoom: 1;
        position: relative;
    }
    #play ul li.list1 {
        background-color: #8DD5E7;
        border:1px solid #004C6D;
    }
    #play ul li.list2 {
        background-color: #EDFF9F;
        border:1px solid #CDCDCD;
    }
</style>

<div id="play">
    <ul id="list1">
        <li class="list1">Item #1</li>
        <li class="list1">Item #2</li>
        <li class="list1">Item #3</li>
        <li class="list1">Item #4</li>
        <li class="list1">Item #5</li>
    </ul>
    <ul id="list2">
        <li class="list2">Item #1</li>
        <li class="list2">Item #2</li>
        <li class="list2">Item #3</li>
        <li class="list2">Item #4</li>
        <li class="list2">Item #5</li>
    </ul>
</div>

<script type="text/javascript">
YUI().use('dd-constrain', 'dd-proxy', 'dd-drop', function(Y) {
    //Listen for all drop:over events
    Y.DD.DDM.on('drop:over', function(e) {
        //Get a reference to our drag and drop nodes
        var drag = e.drag.get('node'),
            drop = e.drop.get('node');
        
        //Are we dropping on a li node?
        if (drop.get('tagName').toLowerCase() === 'li') {
            //Are we not going up?
            if (!goingUp) {
                drop = drop.get('nextSibling');
            }
            //Add the node to this list
            e.drop.get('node').get('parentNode').insertBefore(drag, drop);
            //Resize this nodes shim, so we can drop on it later.
            e.drop.sizeShim();
        }
    });
    //Listen for all drag:drag events
    Y.DD.DDM.on('drag:drag', function(e) {
        //Get the last y point
        var y = e.target.lastXY[1];
        //is it greater than the lastY var?
        if (y < lastY) {
            //We are going up
            goingUp = true;
        } else {
            //We are going down.
            goingUp = false;
        }
        //Cache for next check
        lastY = y;
    });
    //Listen for all drag:start events
    Y.DD.DDM.on('drag:start', function(e) {
        //Get our drag object
        var drag = e.target;
        //Set some styles here
        drag.get('node').setStyle('opacity', '.25');
        drag.get('dragNode').set('innerHTML', drag.get('node').get('innerHTML'));
        drag.get('dragNode').setStyles({
            opacity: '.5',
            borderColor: drag.get('node').getStyle('borderColor'),
            backgroundColor: drag.get('node').getStyle('backgroundColor')
        });
    });
    //Listen for a drag:end events
    Y.DD.DDM.on('drag:end', function(e) {
        var drag = e.target;
        //Put our styles back
        drag.get('node').setStyles({
            visibility: '',
            opacity: '1'
        });
    });
    //Listen for all drag:drophit events
    Y.DD.DDM.on('drag:drophit', function(e) {
        var drop = e.drop.get('node'),
            drag = e.drag.get('node');

        //if we are not on an li, we must have been dropped on a ul
        if (drop.get('tagName').toLowerCase() !== 'li') {
            if (!drop.contains(drag)) {
                drop.appendChild(drag);
            }
        }
    });
    
    //Static Vars
    var goingUp = false, lastY = 0;

    //Get the list of li's in the lists and make them draggable
    var lis = Y.Node.all('#play ul li');
    lis.each(function(v, k) {
        var dd = new Y.DD.Drag({
            node: v,
            target: {
                padding: '0 0 0 20'
            }
        }).plug(Y.Plugin.DDProxy, {
            moveOnEnd: false
        }).plug(Y.Plugin.DDConstrained, {
            constrain2node: '#play'
        });
    });

    //Create simple targets for the 2 lists.
    var uls = Y.Node.all('#play ul');
    uls.each(function(v, k) {
        var tar = new Y.DD.Drop({
            node: v
        });
    });
    
});

</script>

	
	<!--END SOURCE CODE FOR EXAMPLE =============================== -->
	
		
		</div>
	</div>			
	</div>
		
	<h3>Setting up the lists</h3>
<p>First we will make some lists that we want to make sortable.</p>
<div id="syntax-ba37bd6222847182575ec3945ad96acd" class="yui-syntax-highlight"><div class="numbers"><pre class="html4strict" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;play&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="kw2">ul</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;list1&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">        <span class="sc2">&lt;<span class="kw2">li</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;list1&quot;</span>&gt;</span>Item #1<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">li</span>&gt;</span></div></li><li class="li1"><div class="de1">        <span class="sc2">&lt;<span class="kw2">li</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;list1&quot;</span>&gt;</span>Item #2<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">li</span>&gt;</span></div></li><li class="li2"><div class="de2">        <span class="sc2">&lt;<span class="kw2">li</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;list1&quot;</span>&gt;</span>Item #3<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">li</span>&gt;</span></div></li><li class="li1"><div class="de1">        <span class="sc2">&lt;<span class="kw2">li</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;list1&quot;</span>&gt;</span>Item #4<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">li</span>&gt;</span></div></li><li class="li1"><div class="de1">        <span class="sc2">&lt;<span class="kw2">li</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;list1&quot;</span>&gt;</span>Item #5<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">li</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">ul</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="kw2">ul</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;list2&quot;</span>&gt;</span></div></li><li class="li2"><div class="de2">        <span class="sc2">&lt;<span class="kw2">li</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;list2&quot;</span>&gt;</span>Item #1<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">li</span>&gt;</span></div></li><li class="li1"><div class="de1">        <span class="sc2">&lt;<span class="kw2">li</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;list2&quot;</span>&gt;</span>Item #2<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">li</span>&gt;</span></div></li><li class="li1"><div class="de1">        <span class="sc2">&lt;<span class="kw2">li</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;list2&quot;</span>&gt;</span>Item #3<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">li</span>&gt;</span></div></li><li class="li1"><div class="de1">        <span class="sc2">&lt;<span class="kw2">li</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;list2&quot;</span>&gt;</span>Item #4<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">li</span>&gt;</span></div></li><li class="li1"><div class="de1">        <span class="sc2">&lt;<span class="kw2">li</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;list2&quot;</span>&gt;</span>Item #5<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">li</span>&gt;</span></div></li><li class="li2"><div class="de2">    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">ul</span>&gt;</span></div></li><li class="li1"><div class="de1"><span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="html4strict" style="font-family:monospace;"><span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;play&quot;</span>&gt;</span>
    <span class="sc2">&lt;<span class="kw2">ul</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;list1&quot;</span>&gt;</span>
        <span class="sc2">&lt;<span class="kw2">li</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;list1&quot;</span>&gt;</span>Item #1<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">li</span>&gt;</span>
        <span class="sc2">&lt;<span class="kw2">li</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;list1&quot;</span>&gt;</span>Item #2<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">li</span>&gt;</span>
        <span class="sc2">&lt;<span class="kw2">li</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;list1&quot;</span>&gt;</span>Item #3<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">li</span>&gt;</span>
        <span class="sc2">&lt;<span class="kw2">li</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;list1&quot;</span>&gt;</span>Item #4<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">li</span>&gt;</span>
        <span class="sc2">&lt;<span class="kw2">li</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;list1&quot;</span>&gt;</span>Item #5<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">li</span>&gt;</span>
    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">ul</span>&gt;</span>
    <span class="sc2">&lt;<span class="kw2">ul</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;list2&quot;</span>&gt;</span>
        <span class="sc2">&lt;<span class="kw2">li</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;list2&quot;</span>&gt;</span>Item #1<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">li</span>&gt;</span>
        <span class="sc2">&lt;<span class="kw2">li</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;list2&quot;</span>&gt;</span>Item #2<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">li</span>&gt;</span>
        <span class="sc2">&lt;<span class="kw2">li</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;list2&quot;</span>&gt;</span>Item #3<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">li</span>&gt;</span>
        <span class="sc2">&lt;<span class="kw2">li</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;list2&quot;</span>&gt;</span>Item #4<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">li</span>&gt;</span>
        <span class="sc2">&lt;<span class="kw2">li</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;list2&quot;</span>&gt;</span>Item #5<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">li</span>&gt;</span>
    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">ul</span>&gt;</span>
<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></pre></div><textarea id="syntax-ba37bd6222847182575ec3945ad96acd-plain"><div id="play">
    <ul id="list1">
        <li class="list1">Item #1</li>
        <li class="list1">Item #2</li>
        <li class="list1">Item #3</li>
        <li class="list1">Item #4</li>
        <li class="list1">Item #5</li>
    </ul>
    <ul id="list2">
        <li class="list2">Item #1</li>
        <li class="list2">Item #2</li>
        <li class="list2">Item #3</li>
        <li class="list2">Item #4</li>
        <li class="list2">Item #5</li>
    </ul>
</div></textarea></div>
<h3>Setting up the YUI Instance</h3>
<p>Now we need to create our YUI instance and tell it to load the <code>dd-constrain</code>, <code>dd-proxy</code> and <code>dd-drop</code>, modules.</p>
<div id="syntax-9be434e9ac21cf1789ad96ad77fe4a72" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">'dd-constrain'</span><span class="sy0">,</span> <span class="st0">'dd-proxy'</span><span class="sy0">,</span> <span class="st0">'dd-drop'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">'dd-constrain'</span><span class="sy0">,</span> <span class="st0">'dd-proxy'</span><span class="sy0">,</span> <span class="st0">'dd-drop'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></pre></div><textarea id="syntax-9be434e9ac21cf1789ad96ad77fe4a72-plain">YUI().use('dd-constrain', 'dd-proxy', 'dd-drop', function(Y) {</textarea></div>
<h3>Making the Nodes Drag Instances and Drop Targets</h3>
<p>Now we have our YUI instance ready, we can make the list items draggable. We will do this using <code>Y.Node.all</code></p>
<p>We will be passing the selector string <code>#play ul li</code> to <code>Y.Node.all</code> to have it return a <code>NodeList</code> of the li's in our 2 lists.
Using this selector syntax we will be able to add new list markup to the <code>#play</code> div and not have to change our code.</p>
<p>Then we will walk that <code>NodeList</code> and create our draggable Nodes.</p>
<p>Note that we are setting the following configs on the Drag instance: <code>proxy, moveOnEnd, constrain2node, target</code>.</p>
<div id="syntax-d31f570a3dcdb233314db1356b9dc011" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">//Get the list of li's in the lists and make them draggable</span></div></li><li class="li1"><div class="de1"><span class="kw2">var</span> lis <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">all</span><span class="br0">&#40;</span><span class="st0">'#play ul li'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">lis.<span class="me1">each</span><span class="br0">&#40;</span><span class="kw2">function</span><span class="br0">&#40;</span>v<span class="sy0">,</span> k<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> dd <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">DD</span>.<span class="me1">Drag</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">        node<span class="sy0">:</span> v<span class="sy0">,</span></div></li><li class="li1"><div class="de1">        <span class="co1">//Make it Drop target and pass this config to the Drop constructor</span></div></li><li class="li1"><div class="de1">        target<span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            padding<span class="sy0">:</span> <span class="st0">'0 0 0 20'</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">    <span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">DDProxy</span><span class="sy0">,</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="co1">//Don't move the node at the end of the drag</span></div></li><li class="li1"><div class="de1">        moveOnEnd<span class="sy0">:</span> <span class="kw2">false</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">DDConstrained</span><span class="sy0">,</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="co1">//Keep it inside the #play node</span></div></li><li class="li2"><div class="de2">        constrain2node<span class="sy0">:</span> <span class="st0">'#play'</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">//Get the list of li's in the lists and make them draggable</span>
<span class="kw2">var</span> lis <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">all</span><span class="br0">&#40;</span><span class="st0">'#play ul li'</span><span class="br0">&#41;</span><span class="sy0">;</span>
lis.<span class="me1">each</span><span class="br0">&#40;</span><span class="kw2">function</span><span class="br0">&#40;</span>v<span class="sy0">,</span> k<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="kw2">var</span> dd <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">DD</span>.<span class="me1">Drag</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
        node<span class="sy0">:</span> v<span class="sy0">,</span>
        <span class="co1">//Make it Drop target and pass this config to the Drop constructor</span>
        target<span class="sy0">:</span> <span class="br0">&#123;</span>
            padding<span class="sy0">:</span> <span class="st0">'0 0 0 20'</span>
        <span class="br0">&#125;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">DDProxy</span><span class="sy0">,</span> <span class="br0">&#123;</span>
        <span class="co1">//Don't move the node at the end of the drag</span>
        moveOnEnd<span class="sy0">:</span> <span class="kw2">false</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">DDConstrained</span><span class="sy0">,</span> <span class="br0">&#123;</span>
        <span class="co1">//Keep it inside the #play node</span>
        constrain2node<span class="sy0">:</span> <span class="st0">'#play'</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-d31f570a3dcdb233314db1356b9dc011-plain">//Get the list of li's in the lists and make them draggable
var lis = Y.Node.all('#play ul li');
lis.each(function(v, k) {
    var dd = new Y.DD.Drag({
        node: v,
        //Make it Drop target and pass this config to the Drop constructor
        target: {
            padding: '0 0 0 20'
        }
    }).plug(Y.Plugin.DDProxy, {
        //Don't move the node at the end of the drag
        moveOnEnd: false
    }).plug(Y.Plugin.DDConstrained, {
        //Keep it inside the #play node
        constrain2node: '#play'
    });
});</textarea></div>
<h3>Making the List Drop Targets too</h3>
<p>We need to make the UL nodes a Drop Target so we can catch drops on the empty space of the list. 
Using this selector syntax we will be able to add new list markup to the <code>#play</code> div and not have to change our code.</p>
<div id="syntax-6f04148c105670d1d196ffab1036ee0d" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">//Create simple targets for the 2 lists.</span></div></li><li class="li1"><div class="de1"><span class="kw2">var</span> uls <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">all</span><span class="br0">&#40;</span><span class="st0">'#play ul'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">uls.<span class="me1">each</span><span class="br0">&#40;</span><span class="kw2">function</span><span class="br0">&#40;</span>v<span class="sy0">,</span> k<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> tar <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">DD</span>.<span class="me1">Drop</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">        node<span class="sy0">:</span> v</div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">//Create simple targets for the 2 lists.</span>
<span class="kw2">var</span> uls <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">all</span><span class="br0">&#40;</span><span class="st0">'#play ul'</span><span class="br0">&#41;</span><span class="sy0">;</span>
uls.<span class="me1">each</span><span class="br0">&#40;</span><span class="kw2">function</span><span class="br0">&#40;</span>v<span class="sy0">,</span> k<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="kw2">var</span> tar <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">DD</span>.<span class="me1">Drop</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
        node<span class="sy0">:</span> v
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-6f04148c105670d1d196ffab1036ee0d-plain">//Create simple targets for the 2 lists.
var uls = Y.Node.all('#play ul');
uls.each(function(v, k) {
    var tar = new Y.DD.Drop({
        node: v
    });
});</textarea></div>

<h3>Using Event Bubbling</h3>
<p>By default, all Drag and Drop instances bubble their events up to the DragDropMgr. In this example we are assuming that there are no other Drag Operations in this YUI Instance.</p>
<h3>Start Drag Event</h3>
<p>The first thing we will do is handle the drag:start event. In this event, we will set up some styles to apply to the <code>node</code> and <code>dragNode</code> of the current Drag instance.</p>
<p>We will also be copying the <code>innerHTML</code> of the <code>node</code> and copying that to the <code>innerHTML</code> of the <code>dragNode</code>. </p>
<p><em>It should be noted, that
doing this will also copy any <code>id</code>'s of the nodes inside the <code>node</code>. So if you are using this on something that is <code>id</code> based, you may need to remove the <code>id</code>'s
of the nodes inside the <code>node</code> that is being dragged.
</em></p>
<div id="syntax-2e28a65cf8751a632c3f3964d6f175d0" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drag:start'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="co1">//Get our drag object</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> drag <span class="sy0">=</span> e.<span class="me1">target</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="co1">//Set some styles here</span></div></li><li class="li2"><div class="de2">    drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">setStyle</span><span class="br0">&#40;</span><span class="st0">'opacity'</span><span class="sy0">,</span> <span class="st0">'.25'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'dragNode'</span><span class="br0">&#41;</span>.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="sy0">,</span> drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'dragNode'</span><span class="br0">&#41;</span>.<span class="me1">setStyles</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        opacity<span class="sy0">:</span> <span class="st0">'.5'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        borderColor<span class="sy0">:</span> drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">getStyle</span><span class="br0">&#40;</span><span class="st0">'borderColor'</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">        backgroundColor<span class="sy0">:</span> drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">getStyle</span><span class="br0">&#40;</span><span class="st0">'backgroundColor'</span><span class="br0">&#41;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drag:start'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="co1">//Get our drag object</span>
    <span class="kw2">var</span> drag <span class="sy0">=</span> e.<span class="me1">target</span><span class="sy0">;</span>
    <span class="co1">//Set some styles here</span>
    drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">setStyle</span><span class="br0">&#40;</span><span class="st0">'opacity'</span><span class="sy0">,</span> <span class="st0">'.25'</span><span class="br0">&#41;</span><span class="sy0">;</span>
    drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'dragNode'</span><span class="br0">&#41;</span>.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="sy0">,</span> drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'dragNode'</span><span class="br0">&#41;</span>.<span class="me1">setStyles</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
        opacity<span class="sy0">:</span> <span class="st0">'.5'</span><span class="sy0">,</span>
        borderColor<span class="sy0">:</span> drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">getStyle</span><span class="br0">&#40;</span><span class="st0">'borderColor'</span><span class="br0">&#41;</span><span class="sy0">,</span>
        backgroundColor<span class="sy0">:</span> drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">getStyle</span><span class="br0">&#40;</span><span class="st0">'backgroundColor'</span><span class="br0">&#41;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-2e28a65cf8751a632c3f3964d6f175d0-plain">Y.DD.DDM.on('drag:start', function(e) {
    //Get our drag object
    var drag = e.target;
    //Set some styles here
    drag.get('node').setStyle('opacity', '.25');
    drag.get('dragNode').set('innerHTML', drag.get('node').get('innerHTML'));
    drag.get('dragNode').setStyles({
        opacity: '.5',
        borderColor: drag.get('node').getStyle('borderColor'),
        backgroundColor: drag.get('node').getStyle('backgroundColor')
    });
});</textarea></div>
<h3>End Drag Event</h3>
<p>In this event, we will reset some of the styles set in the drag:start event.</p>
<div id="syntax-5d989e98af7fae40b0b9fce07c29d567" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drag:end'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> drag <span class="sy0">=</span> e.<span class="me1">target</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="co1">//Put our styles back</span></div></li><li class="li1"><div class="de1">    drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">setStyles</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">        visibility<span class="sy0">:</span> <span class="st0">''</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        opacity<span class="sy0">:</span> <span class="st0">'1'</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drag:end'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="kw2">var</span> drag <span class="sy0">=</span> e.<span class="me1">target</span><span class="sy0">;</span>
    <span class="co1">//Put our styles back</span>
    drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">setStyles</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
        visibility<span class="sy0">:</span> <span class="st0">''</span><span class="sy0">,</span>
        opacity<span class="sy0">:</span> <span class="st0">'1'</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-5d989e98af7fae40b0b9fce07c29d567-plain">Y.DD.DDM.on('drag:end', function(e) {
    var drag = e.target;
    //Put our styles back
    drag.get('node').setStyles({
        visibility: '',
        opacity: '1'
    });
});</textarea></div>

<h3>Drag Event</h3>
<p>In this event, we will track the up/down movement for later use.</p>
<div id="syntax-7bb7dc9050b81e0652fe0a3eb8908b27" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drag:drag'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="co1">//Get the last y point</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> y <span class="sy0">=</span> e.<span class="me1">target</span>.<span class="me1">lastXY</span><span class="br0">&#91;</span><span class="nu0">1</span><span class="br0">&#93;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="co1">//is it greater than the lastY var?</span></div></li><li class="li2"><div class="de2">    <span class="kw1">if</span> <span class="br0">&#40;</span>y <span class="sy0">&amp;</span>lt<span class="sy0">;</span> lastY<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="co1">//We are going up</span></div></li><li class="li1"><div class="de1">        goingUp <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="co1">//We are going down.</span></div></li><li class="li2"><div class="de2">        goingUp <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">    <span class="co1">//Cache for next check</span></div></li><li class="li1"><div class="de1">    lastY <span class="sy0">=</span> y<span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drag:drag'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="co1">//Get the last y point</span>
    <span class="kw2">var</span> y <span class="sy0">=</span> e.<span class="me1">target</span>.<span class="me1">lastXY</span><span class="br0">&#91;</span><span class="nu0">1</span><span class="br0">&#93;</span><span class="sy0">;</span>
    <span class="co1">//is it greater than the lastY var?</span>
    <span class="kw1">if</span> <span class="br0">&#40;</span>y <span class="sy0">&amp;</span>lt<span class="sy0">;</span> lastY<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="co1">//We are going up</span>
        goingUp <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span>
    <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="br0">&#123;</span>
        <span class="co1">//We are going down.</span>
        goingUp <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">;</span>
    <span class="br0">&#125;</span>
    <span class="co1">//Cache for next check</span>
    lastY <span class="sy0">=</span> y<span class="sy0">;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-7bb7dc9050b81e0652fe0a3eb8908b27-plain">Y.DD.DDM.on('drag:drag', function(e) {
    //Get the last y point
    var y = e.target.lastXY[1];
    //is it greater than the lastY var?
    if (y &lt; lastY) {
        //We are going up
        goingUp = true;
    } else {
        //We are going down.
        goingUp = false;
    }
    //Cache for next check
    lastY = y;
});</textarea></div>
<h3>Over Drop Event</h3>
<p>In this event, know which Target we are over, so we add the Drag node to the list either above or below the current Drop Target.</p>
<div id="syntax-2fb9d43ea533de2412bbe2b57a5ef0b2" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drop:over'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="co1">//Get a reference to our drag and drop nodes</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> drag <span class="sy0">=</span> e.<span class="me1">drag</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        drop <span class="sy0">=</span> e.<span class="me1">drop</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">//Are we dropping on a li node?</span></div></li><li class="li1"><div class="de1">    <span class="kw1">if</span> <span class="br0">&#40;</span>drop.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'tagName'</span><span class="br0">&#41;</span>.<span class="me1">toLowerCase</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="sy0">===</span> <span class="st0">'li'</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="co1">//Are we not going up?</span></div></li><li class="li1"><div class="de1">        <span class="kw1">if</span> <span class="br0">&#40;</span><span class="sy0">!</span>goingUp<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">            drop <span class="sy0">=</span> drop.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'nextSibling'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">        <span class="co1">//Add the node to this list</span></div></li><li class="li1"><div class="de1">        e.<span class="me1">drop</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'parentNode'</span><span class="br0">&#41;</span>.<span class="me1">insertBefore</span><span class="br0">&#40;</span>drag<span class="sy0">,</span> drop<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="co1">//Resize this nodes shim, so we can drop on it later.</span></div></li><li class="li2"><div class="de2">        e.<span class="me1">drop</span>.<span class="me1">sizeShim</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drop:over'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="co1">//Get a reference to our drag and drop nodes</span>
    <span class="kw2">var</span> drag <span class="sy0">=</span> e.<span class="me1">drag</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span><span class="sy0">,</span>
        drop <span class="sy0">=</span> e.<span class="me1">drop</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">//Are we dropping on a li node?</span>
    <span class="kw1">if</span> <span class="br0">&#40;</span>drop.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'tagName'</span><span class="br0">&#41;</span>.<span class="me1">toLowerCase</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="sy0">===</span> <span class="st0">'li'</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="co1">//Are we not going up?</span>
        <span class="kw1">if</span> <span class="br0">&#40;</span><span class="sy0">!</span>goingUp<span class="br0">&#41;</span> <span class="br0">&#123;</span>
            drop <span class="sy0">=</span> drop.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'nextSibling'</span><span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="br0">&#125;</span>
        <span class="co1">//Add the node to this list</span>
        e.<span class="me1">drop</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'parentNode'</span><span class="br0">&#41;</span>.<span class="me1">insertBefore</span><span class="br0">&#40;</span>drag<span class="sy0">,</span> drop<span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="co1">//Resize this nodes shim, so we can drop on it later.</span>
        e.<span class="me1">drop</span>.<span class="me1">sizeShim</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-2fb9d43ea533de2412bbe2b57a5ef0b2-plain">Y.DD.DDM.on('drop:over', function(e) {
    //Get a reference to our drag and drop nodes
    var drag = e.drag.get('node'),
        drop = e.drop.get('node');
    
    //Are we dropping on a li node?
    if (drop.get('tagName').toLowerCase() === 'li') {
        //Are we not going up?
        if (!goingUp) {
            drop = drop.get('nextSibling');
        }
        //Add the node to this list
        e.drop.get('node').get('parentNode').insertBefore(drag, drop);
        //Resize this nodes shim, so we can drop on it later.
        e.drop.sizeShim();
    }
});</textarea></div>
<h3>Drop Hit Event</h3>
<p>In this event, we check to see if the target that was dropped on was not an LI node. If it wasn't, then we know it was dropped on the empty space of the UL.</p>
<div id="syntax-95f4ba14d0a028d09ed9b49648efa340" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drag:drophit'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> drop <span class="sy0">=</span> e.<span class="me1">drop</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        drag <span class="sy0">=</span> e.<span class="me1">drag</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">    <span class="co1">//if we are not on an li, we must have been dropped on a ul</span></div></li><li class="li1"><div class="de1">    <span class="kw1">if</span> <span class="br0">&#40;</span>drop.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'tagName'</span><span class="br0">&#41;</span>.<span class="me1">toLowerCase</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="sy0">!==</span> <span class="st0">'li'</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="kw1">if</span> <span class="br0">&#40;</span><span class="sy0">!</span>drop.<span class="me1">contains</span><span class="br0">&#40;</span>drag<span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            drop.<span class="me1">appendChild</span><span class="br0">&#40;</span>drag<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">    <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drag:drophit'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="kw2">var</span> drop <span class="sy0">=</span> e.<span class="me1">drop</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span><span class="sy0">,</span>
        drag <span class="sy0">=</span> e.<span class="me1">drag</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">//if we are not on an li, we must have been dropped on a ul</span>
    <span class="kw1">if</span> <span class="br0">&#40;</span>drop.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'tagName'</span><span class="br0">&#41;</span>.<span class="me1">toLowerCase</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="sy0">!==</span> <span class="st0">'li'</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw1">if</span> <span class="br0">&#40;</span><span class="sy0">!</span>drop.<span class="me1">contains</span><span class="br0">&#40;</span>drag<span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
            drop.<span class="me1">appendChild</span><span class="br0">&#40;</span>drag<span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="br0">&#125;</span>
    <span class="br0">&#125;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-95f4ba14d0a028d09ed9b49648efa340-plain">Y.DD.DDM.on('drag:drophit', function(e) {
    var drop = e.drop.get('node'),
        drag = e.drag.get('node');

    //if we are not on an li, we must have been dropped on a ul
    if (drop.get('tagName').toLowerCase() !== 'li') {
        if (!drop.contains(drag)) {
            drop.appendChild(drag);
        }
    }
});</textarea></div>
<h3>Full Javascript Source</h3>
<div id="syntax-57390f250746023232d4187b65f77294" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">'dd-constrain'</span><span class="sy0">,</span> <span class="st0">'dd-proxy'</span><span class="sy0">,</span> <span class="st0">'dd-drop'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="co1">//Listen for all drop:over events</span></div></li><li class="li1"><div class="de1">    Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drop:over'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="co1">//Get a reference to our drag and drop nodes</span></div></li><li class="li2"><div class="de2">        <span class="kw2">var</span> drag <span class="sy0">=</span> e.<span class="me1">drag</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            drop <span class="sy0">=</span> e.<span class="me1">drop</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">        <span class="co1">//Are we dropping on a li node?</span></div></li><li class="li1"><div class="de1">        <span class="kw1">if</span> <span class="br0">&#40;</span>drop.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'tagName'</span><span class="br0">&#41;</span>.<span class="me1">toLowerCase</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="sy0">===</span> <span class="st0">'li'</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">            <span class="co1">//Are we not going up?</span></div></li><li class="li1"><div class="de1">            <span class="kw1">if</span> <span class="br0">&#40;</span><span class="sy0">!</span>goingUp<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                drop <span class="sy0">=</span> drop.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'nextSibling'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">            <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">            <span class="co1">//Add the node to this list</span></div></li><li class="li2"><div class="de2">            e.<span class="me1">drop</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'parentNode'</span><span class="br0">&#41;</span>.<span class="me1">insertBefore</span><span class="br0">&#40;</span>drag<span class="sy0">,</span> drop<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">            <span class="co1">//Resize this nodes shim, so we can drop on it later.</span></div></li><li class="li1"><div class="de1">            e.<span class="me1">drop</span>.<span class="me1">sizeShim</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    <span class="co1">//Listen for all drag:drag events</span></div></li><li class="li1"><div class="de1">    Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drag:drag'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="co1">//Get the last y point</span></div></li><li class="li1"><div class="de1">        <span class="kw2">var</span> y <span class="sy0">=</span> e.<span class="me1">target</span>.<span class="me1">lastXY</span><span class="br0">&#91;</span><span class="nu0">1</span><span class="br0">&#93;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="co1">//is it greater than the lastY var?</span></div></li><li class="li2"><div class="de2">        <span class="kw1">if</span> <span class="br0">&#40;</span>y <span class="sy0">&lt;</span> lastY<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            <span class="co1">//We are going up</span></div></li><li class="li1"><div class="de1">            goingUp <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            <span class="co1">//We are going down.</span></div></li><li class="li2"><div class="de2">            goingUp <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">        <span class="co1">//Cache for next check</span></div></li><li class="li1"><div class="de1">        lastY <span class="sy0">=</span> y<span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    <span class="co1">//Listen for all drag:start events</span></div></li><li class="li1"><div class="de1">    Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drag:start'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="co1">//Get our drag object</span></div></li><li class="li1"><div class="de1">        <span class="kw2">var</span> drag <span class="sy0">=</span> e.<span class="me1">target</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="co1">//Set some styles here</span></div></li><li class="li2"><div class="de2">        drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">setStyle</span><span class="br0">&#40;</span><span class="st0">'opacity'</span><span class="sy0">,</span> <span class="st0">'.25'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'dragNode'</span><span class="br0">&#41;</span>.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="sy0">,</span> drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'dragNode'</span><span class="br0">&#41;</span>.<span class="me1">setStyles</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            opacity<span class="sy0">:</span> <span class="st0">'.5'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            borderColor<span class="sy0">:</span> drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">getStyle</span><span class="br0">&#40;</span><span class="st0">'borderColor'</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">            backgroundColor<span class="sy0">:</span> drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">getStyle</span><span class="br0">&#40;</span><span class="st0">'backgroundColor'</span><span class="br0">&#41;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="co1">//Listen for a drag:end events</span></div></li><li class="li1"><div class="de1">    Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drag:end'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">        <span class="kw2">var</span> drag <span class="sy0">=</span> e.<span class="me1">target</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="co1">//Put our styles back</span></div></li><li class="li1"><div class="de1">        drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">setStyles</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            visibility<span class="sy0">:</span> <span class="st0">''</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            opacity<span class="sy0">:</span> <span class="st0">'1'</span></div></li><li class="li2"><div class="de2">        <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="co1">//Listen for all drag:drophit events</span></div></li><li class="li1"><div class="de1">    Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drag:drophit'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="kw2">var</span> drop <span class="sy0">=</span> e.<span class="me1">drop</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">            drag <span class="sy0">=</span> e.<span class="me1">drag</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">        <span class="co1">//if we are not on an li, we must have been dropped on a ul</span></div></li><li class="li1"><div class="de1">        <span class="kw1">if</span> <span class="br0">&#40;</span>drop.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'tagName'</span><span class="br0">&#41;</span>.<span class="me1">toLowerCase</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="sy0">!==</span> <span class="st0">'li'</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            <span class="kw1">if</span> <span class="br0">&#40;</span><span class="sy0">!</span>drop.<span class="me1">contains</span><span class="br0">&#40;</span>drag<span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">                drop.<span class="me1">appendChild</span><span class="br0">&#40;</span>drag<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">            <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">    <span class="co1">//Static Vars</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> goingUp <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">,</span> lastY <span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">//Get the list of li's in the lists and make them draggable</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> lis <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">all</span><span class="br0">&#40;</span><span class="st0">'#play ul li'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    lis.<span class="me1">each</span><span class="br0">&#40;</span><span class="kw2">function</span><span class="br0">&#40;</span>v<span class="sy0">,</span> k<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="kw2">var</span> dd <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">DD</span>.<span class="me1">Drag</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            node<span class="sy0">:</span> v<span class="sy0">,</span></div></li><li class="li1"><div class="de1">            target<span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                padding<span class="sy0">:</span> <span class="st0">'0 0 0 20'</span></div></li><li class="li2"><div class="de2">            <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">DDProxy</span><span class="sy0">,</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            moveOnEnd<span class="sy0">:</span> <span class="kw2">false</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">DDConstrained</span><span class="sy0">,</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            constrain2node<span class="sy0">:</span> <span class="st0">'#play'</span></div></li><li class="li2"><div class="de2">        <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">//Create simple targets for the 2 lists.</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> uls <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">all</span><span class="br0">&#40;</span><span class="st0">'#play ul'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    uls.<span class="me1">each</span><span class="br0">&#40;</span><span class="kw2">function</span><span class="br0">&#40;</span>v<span class="sy0">,</span> k<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="kw2">var</span> tar <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">DD</span>.<span class="me1">Drop</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            node<span class="sy0">:</span> v</div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">'dd-constrain'</span><span class="sy0">,</span> <span class="st0">'dd-proxy'</span><span class="sy0">,</span> <span class="st0">'dd-drop'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="co1">//Listen for all drop:over events</span>
    Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drop:over'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="co1">//Get a reference to our drag and drop nodes</span>
        <span class="kw2">var</span> drag <span class="sy0">=</span> e.<span class="me1">drag</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span><span class="sy0">,</span>
            drop <span class="sy0">=</span> e.<span class="me1">drop</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
        <span class="co1">//Are we dropping on a li node?</span>
        <span class="kw1">if</span> <span class="br0">&#40;</span>drop.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'tagName'</span><span class="br0">&#41;</span>.<span class="me1">toLowerCase</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="sy0">===</span> <span class="st0">'li'</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
            <span class="co1">//Are we not going up?</span>
            <span class="kw1">if</span> <span class="br0">&#40;</span><span class="sy0">!</span>goingUp<span class="br0">&#41;</span> <span class="br0">&#123;</span>
                drop <span class="sy0">=</span> drop.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'nextSibling'</span><span class="br0">&#41;</span><span class="sy0">;</span>
            <span class="br0">&#125;</span>
            <span class="co1">//Add the node to this list</span>
            e.<span class="me1">drop</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'parentNode'</span><span class="br0">&#41;</span>.<span class="me1">insertBefore</span><span class="br0">&#40;</span>drag<span class="sy0">,</span> drop<span class="br0">&#41;</span><span class="sy0">;</span>
            <span class="co1">//Resize this nodes shim, so we can drop on it later.</span>
            e.<span class="me1">drop</span>.<span class="me1">sizeShim</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="br0">&#125;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="co1">//Listen for all drag:drag events</span>
    Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drag:drag'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="co1">//Get the last y point</span>
        <span class="kw2">var</span> y <span class="sy0">=</span> e.<span class="me1">target</span>.<span class="me1">lastXY</span><span class="br0">&#91;</span><span class="nu0">1</span><span class="br0">&#93;</span><span class="sy0">;</span>
        <span class="co1">//is it greater than the lastY var?</span>
        <span class="kw1">if</span> <span class="br0">&#40;</span>y <span class="sy0">&lt;</span> lastY<span class="br0">&#41;</span> <span class="br0">&#123;</span>
            <span class="co1">//We are going up</span>
            goingUp <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span>
        <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="br0">&#123;</span>
            <span class="co1">//We are going down.</span>
            goingUp <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">;</span>
        <span class="br0">&#125;</span>
        <span class="co1">//Cache for next check</span>
        lastY <span class="sy0">=</span> y<span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="co1">//Listen for all drag:start events</span>
    Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drag:start'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="co1">//Get our drag object</span>
        <span class="kw2">var</span> drag <span class="sy0">=</span> e.<span class="me1">target</span><span class="sy0">;</span>
        <span class="co1">//Set some styles here</span>
        drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">setStyle</span><span class="br0">&#40;</span><span class="st0">'opacity'</span><span class="sy0">,</span> <span class="st0">'.25'</span><span class="br0">&#41;</span><span class="sy0">;</span>
        drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'dragNode'</span><span class="br0">&#41;</span>.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="sy0">,</span> drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span>
        drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'dragNode'</span><span class="br0">&#41;</span>.<span class="me1">setStyles</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
            opacity<span class="sy0">:</span> <span class="st0">'.5'</span><span class="sy0">,</span>
            borderColor<span class="sy0">:</span> drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">getStyle</span><span class="br0">&#40;</span><span class="st0">'borderColor'</span><span class="br0">&#41;</span><span class="sy0">,</span>
            backgroundColor<span class="sy0">:</span> drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">getStyle</span><span class="br0">&#40;</span><span class="st0">'backgroundColor'</span><span class="br0">&#41;</span>
        <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="co1">//Listen for a drag:end events</span>
    Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drag:end'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw2">var</span> drag <span class="sy0">=</span> e.<span class="me1">target</span><span class="sy0">;</span>
        <span class="co1">//Put our styles back</span>
        drag.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span>.<span class="me1">setStyles</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
            visibility<span class="sy0">:</span> <span class="st0">''</span><span class="sy0">,</span>
            opacity<span class="sy0">:</span> <span class="st0">'1'</span>
        <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="co1">//Listen for all drag:drophit events</span>
    Y.<span class="me1">DD</span>.<span class="me1">DDM</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'drag:drophit'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw2">var</span> drop <span class="sy0">=</span> e.<span class="me1">drop</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span><span class="sy0">,</span>
            drag <span class="sy0">=</span> e.<span class="me1">drag</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
        <span class="co1">//if we are not on an li, we must have been dropped on a ul</span>
        <span class="kw1">if</span> <span class="br0">&#40;</span>drop.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'tagName'</span><span class="br0">&#41;</span>.<span class="me1">toLowerCase</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="sy0">!==</span> <span class="st0">'li'</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
            <span class="kw1">if</span> <span class="br0">&#40;</span><span class="sy0">!</span>drop.<span class="me1">contains</span><span class="br0">&#40;</span>drag<span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
                drop.<span class="me1">appendChild</span><span class="br0">&#40;</span>drag<span class="br0">&#41;</span><span class="sy0">;</span>
            <span class="br0">&#125;</span>
        <span class="br0">&#125;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">//Static Vars</span>
    <span class="kw2">var</span> goingUp <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">,</span> lastY <span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">//Get the list of li's in the lists and make them draggable</span>
    <span class="kw2">var</span> lis <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">all</span><span class="br0">&#40;</span><span class="st0">'#play ul li'</span><span class="br0">&#41;</span><span class="sy0">;</span>
    lis.<span class="me1">each</span><span class="br0">&#40;</span><span class="kw2">function</span><span class="br0">&#40;</span>v<span class="sy0">,</span> k<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw2">var</span> dd <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">DD</span>.<span class="me1">Drag</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
            node<span class="sy0">:</span> v<span class="sy0">,</span>
            target<span class="sy0">:</span> <span class="br0">&#123;</span>
                padding<span class="sy0">:</span> <span class="st0">'0 0 0 20'</span>
            <span class="br0">&#125;</span>
        <span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">DDProxy</span><span class="sy0">,</span> <span class="br0">&#123;</span>
            moveOnEnd<span class="sy0">:</span> <span class="kw2">false</span>
        <span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">DDConstrained</span><span class="sy0">,</span> <span class="br0">&#123;</span>
            constrain2node<span class="sy0">:</span> <span class="st0">'#play'</span>
        <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">//Create simple targets for the 2 lists.</span>
    <span class="kw2">var</span> uls <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">all</span><span class="br0">&#40;</span><span class="st0">'#play ul'</span><span class="br0">&#41;</span><span class="sy0">;</span>
    uls.<span class="me1">each</span><span class="br0">&#40;</span><span class="kw2">function</span><span class="br0">&#40;</span>v<span class="sy0">,</span> k<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw2">var</span> tar <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">DD</span>.<span class="me1">Drop</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
            node<span class="sy0">:</span> v
        <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-57390f250746023232d4187b65f77294-plain">YUI().use('dd-constrain', 'dd-proxy', 'dd-drop', function(Y) {
    //Listen for all drop:over events
    Y.DD.DDM.on('drop:over', function(e) {
        //Get a reference to our drag and drop nodes
        var drag = e.drag.get('node'),
            drop = e.drop.get('node');
        
        //Are we dropping on a li node?
        if (drop.get('tagName').toLowerCase() === 'li') {
            //Are we not going up?
            if (!goingUp) {
                drop = drop.get('nextSibling');
            }
            //Add the node to this list
            e.drop.get('node').get('parentNode').insertBefore(drag, drop);
            //Resize this nodes shim, so we can drop on it later.
            e.drop.sizeShim();
        }
    });
    //Listen for all drag:drag events
    Y.DD.DDM.on('drag:drag', function(e) {
        //Get the last y point
        var y = e.target.lastXY[1];
        //is it greater than the lastY var?
        if (y < lastY) {
            //We are going up
            goingUp = true;
        } else {
            //We are going down.
            goingUp = false;
        }
        //Cache for next check
        lastY = y;
    });
    //Listen for all drag:start events
    Y.DD.DDM.on('drag:start', function(e) {
        //Get our drag object
        var drag = e.target;
        //Set some styles here
        drag.get('node').setStyle('opacity', '.25');
        drag.get('dragNode').set('innerHTML', drag.get('node').get('innerHTML'));
        drag.get('dragNode').setStyles({
            opacity: '.5',
            borderColor: drag.get('node').getStyle('borderColor'),
            backgroundColor: drag.get('node').getStyle('backgroundColor')
        });
    });
    //Listen for a drag:end events
    Y.DD.DDM.on('drag:end', function(e) {
        var drag = e.target;
        //Put our styles back
        drag.get('node').setStyles({
            visibility: '',
            opacity: '1'
        });
    });
    //Listen for all drag:drophit events
    Y.DD.DDM.on('drag:drophit', function(e) {
        var drop = e.drop.get('node'),
            drag = e.drag.get('node');

        //if we are not on an li, we must have been dropped on a ul
        if (drop.get('tagName').toLowerCase() !== 'li') {
            if (!drop.contains(drag)) {
                drop.appendChild(drag);
            }
        }
    });
    
    //Static Vars
    var goingUp = false, lastY = 0;

    //Get the list of li's in the lists and make them draggable
    var lis = Y.Node.all('#play ul li');
    lis.each(function(v, k) {
        var dd = new Y.DD.Drag({
            node: v,
            target: {
                padding: '0 0 0 20'
            }
        }).plug(Y.Plugin.DDProxy, {
            moveOnEnd: false
        }).plug(Y.Plugin.DDConstrained, {
            constrain2node: '#play'
        });
    });

    //Create simple targets for the 2 lists.
    var uls = Y.Node.all('#play ul');
    uls.each(function(v, k) {
        var tar = new Y.DD.Drop({
            node: v
        });
    });
    
});</textarea></div>
				</div>
				<div class="yui-u sidebar">
					
				
					<div id="examples" class="mod box4">
                        <div class="hd">
						<h4>
    Drag &amp; Drop Examples:</h4>
                        </div>
						<div class="bd">
							<ul>
								<li><a href='../dd/simple-drag.html'>Simple Drag</a></li><li><a href='../dd/drag-plugin.html'>Drag Node Plugin</a></li><li><a href='../dd/proxy-drag.html'>Proxy Drag</a></li><li><a href='../dd/constrained-drag.html'>Drag Constrained to a Region</a></li><li><a href='../dd/groups-drag.html'>Interaction Groups</a></li><li><a href='../dd/shim-drag.html'>Using the Drag Shim</a></li><li><a href='../dd/anim-drop.html'>Animated Drop Targets</a></li><li><a href='../dd/drop-code.html'>Drop Based Coding</a></li><li><a href='../dd/winscroll.html'>Window Scrolling</a></li><li><a href='../dd/delegate.html'>Drag Delegation</a></li><li><a href='../dd/delegate-drop.html'>Drag Delegation with a Drop Target</a></li><li><a href='../dd/delegate-plugins.html'>Using Drag plugins with Delegate</a></li><li class='selected'><a href='../dd/list-drag.html'>List reorder w/Bubbling</a></li><li><a href='../dd/scroll-list.html'>List reorder w/Scrolling</a></li><li><a href='../dd/portal-drag.html'>Portal Style Example</a></li><li><a href='../dd/photo-browser.html'>Photo Browser</a></li><li><a href='../stylesheet/stylesheet_theme.html'>Adjusting a page theme on the fly (included with examples for StyleSheet)</a></li>							</ul>
						</div>
					</div>
					
					<div class="mod box4">
                        <div class="hd">
						<h4>More Drag &amp; Drop Resources:</h4>
                        </div>
                        <div class="bd">
						<ul>
							<!-- <li><a href="http://developer.yahoo.com/yui/dd/">User's Guide</a> (external)</li> -->
<li><a href="../../api/module_dd.html">API Documentation</a></li></ul>
                        </div>
					</div>
			  </div>
		</div>
		
		</div>
	</div>


<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator/index.html">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Browser History - Functional Examples" href="../../examples/history/index.html">Browser History</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="selected "><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="Internationalization - Functional Examples" href="../../examples/intl/index.html">Internationalization <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Tabview - Functional Examples" href="../../examples/tabview/index.html">Tabview <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2010 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script language="javascript"> 
var yuiConfig = {};
</script>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>
</body>
</html>
